<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
  <h1>员工系统管理</h1>
    <div v-if="!isLogin">
    <a href="javascript:void(0)">注册</a>
    <a href="javascript:void(0)" @click="login()">登录</a>
  </div>
  <div v-else>
    <input type="text" v-model="newName" placeholder="请输入员工姓名">
    <input type="button" value="添加员工" @click="add()">
    <a href="javascript:void(0)" @click="logout()">退出登录</a>
  </div>
  <table border="2">
    <tr>
      <th>编号</th><th>名字</th><th v-if="isLogin">操作</th>
    </tr>
    <tr v-for="(name,i) in arr">
      <td>{{i+1}}</td>
      <td>{{name}}</td>
      <td v-if="isLogin"><input type="button" value="remove" @click="del(i)"></td>
    </tr>
  </table>
</div>


<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
  let v= new Vue({
    el:"body>div",
    data:{
      arr:["刘备","关羽","张飞"],
      isLogin: false,
      newName:"",
    },
    methods:{
      login() {
        v.isLogin = true;
      },
      logout() {
        v.isLogin = false;
      },
      add() {
        v.arr.push(v.newName);
      },
      del(i) {
        v.arr.splice(i, 1);
      }
    }
  })
</script>
</body>
</html>